<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>浑水摸鱼</title>
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/dataTables.bootstrap4.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/style.css">
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
		<div class="main-wrapper">
			<!-- 导航栏 -->
			<div class="header">
				<div class="header-left">
					<a href="index.html" class="logo">
						<img src="assets/img/logo.png" width="35" height="35" alt=""> <span>浑水摸鱼</span>
					</a>
				</div>
				<a id="toggle_btn" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
				<a id="mobile_btn" class="mobile_btn float-left" href="#sidebar"><i class="fa fa-bars"></i></a>
				<ul class="nav user-menu float-right">
					<li class="nav-item dropdown has-arrow">
						<a href="#" class="dropdown-toggle nav-link user-link" data-toggle="dropdown">
							<span class="user-img"><img class="rounded-circle" src="assets/img/user.jpg" width="40"
									alt="Admin">
								<span class="status online"></span></span>
							<span>Admin</span>
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="profile.html">My Profile</a>
							<a class="dropdown-item" href="edit-profile.html">Edit Profile</a>
							<a class="dropdown-item" href="settings.html">Settings</a>
							<a class="dropdown-item" href="login.html">Logout</a>
						</div>
					</li>
				</ul>
				<div class="dropdown mobile-user-menu float-right">
					<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
							class="fa fa-ellipsis-v"></i></a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="profile.html">My Profile</a>
						<a class="dropdown-item" href="edit-profile.html">Edit Profile</a>
						<a class="dropdown-item" href="settings.html">Settings</a>
						<a class="dropdown-item" href="login.html">Logout</a>
					</div>
				</div>
			</div>

			<!-- 侧边栏 -->
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
						<ul>
							<li class="menu-title">主页</li>
							<li>
								<a id="experience"><i class="fa fa-wheelchair"></i> <span>经验</span></a>
							</li>
							<li>
								<a id="arrange"><i class="fa fa-calendar-check-o"></i> <span>维护信息</span></a>
							</li>
							<li>
								<a id="liaisons"><i class="fa fa-user"></i> <span> 联系人 </span></a>
							</li>
							<li>
								<a id="record"><i class="fa fa-calendar"></i> <span> 优化日志 </span></a>
							</li>
							<li class="active">
								<a id="etextxx"><i class="fa fa-comments"></i> <span> Texts </span></a>
							</li>
						</ul>
						</li>
						</ul>
					</div>
				</div>
			</div>


			<div class="page-wrapper">
				<div class="content">
					<div class="row">
						<div class="col-sm-4 col-3">
							<h4 class="page-title">消息列表</h4>
							<!-- Patients -->
						</div>
					</div>
					<div class="row align-items-center">
						<div class="col">
							<span>所属用户:</span>
							<input class="search-input" type="text" name="所属用户" id="operator">
							<span>发送人:</span>
							<input class="search-input" type="text" name="姓名" id="deliver">
							<span>系统短信内容:</span>
							<input class="search-input" type="text" name="工作单位" id="main">
							<span>消息是否已读:</span>
							<select id="identify" class="btn btn-outline-dark">
								<option value="">请选择</option>
								<option value="是">是</option>
								<option value="否">否</option>
							</select>
						</div>
						<div class="col-2">
							<button id="search" class="btn btn btn-primary btn-rounded"><i
									class="fa fa-plus"></i>搜索</button>
							<a href="add-texts.html" id="add" class="btn btn btn-primary btn-rounded "><i
									class="fa fa-plus"></i>
								点击增加</a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<table class="table table-striped custom-table" id="arrange_table">

							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="createFileMModal" role="dialog" aria-labelledby="exampleModalLabel"
			aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="createFileTitle"></h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">消息回复</span>
							<h5 class="modal-title" id="createFileTitle"></h5>
						</button>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="fileName" class="col-form-label">回复消息</label>
								<input type="text" autofocus class="form-control" id="fileName">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="createFileSureBut">发送</button>
						<button type="button" class="btn btn-dark" id="createFileSure">取消</button>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="sidebar-overlay" data-reff=""></div>
		<script src="assets/js/jquery-3.2.1.min.js"></script>
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.slimscroll.js"></script>
		<script src="assets/js/select2.min.js"></script>
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/dataTables.bootstrap4.min.js"></script>
		<script src="assets/js/moment.min.js"></script>
		<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
		<script src="assets/js/app.js"></script>
		<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
		<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/locale/bootstrap-table-zh-CN.min.js"></script>
		<script>
			var id = getUrlParams('id');
			var level;
			var limtleveledit = 1;
			var limtleveldele = 1;
			var limtleveladd = 1; 
			//限制用户操作等级
			function getUrlParams(key) {
				var url = window.location.search.substr(1);
				if (url == '') {
					return false;
				}
				var paramsArr = url.split('&');
				for (var i = 0; i < paramsArr.length; i++) {
					var combina = paramsArr[i].split("=");
					if (combina[0] == key) {
						return combina[1];
					}
				}
				return false;
			}
			$('#experience').attr('href', 'experience.html?id=' + id);
			$('#arrange').attr('href', 'arrange.html?id=' + id);
			$('#liaisons').attr('href', 'liaisons.html?id=' + id);
			$('#record').attr('href', 'record.html?id=' + id);
			$('#etextxx').attr('href', 'etextxx.html?id=' + id);
			
			//从后端获取用户的等级
			$.ajax({
				type: 'GET',
				dataType: 'json',
				url: 'http://localhost:8080/back/user/detail/' + id,
				contentType: "application/json",
				async: false,
				success: function(d) {
					level = Number(d.data.level);
					if (level < 0) {
						alert("当前用户没有登录权限！！");
						window.location.href = 'login.html';
					}
				},
				error: function(d) {
					console.log(d)
					alert("当前用户没有登录！！");
					window.location.href = 'login.html';
				}
			})
			console.log(level);
			if (level < limtleveladd) {
				// 由于add是用a标签跳转，因此当等级不够时，将跳转链接改为当前页面空
				$('#add').attr('href', '');
			}
			var userid = getUrlParams('id');

			function getdata(url, id) {
				let data
				$.ajax({
					type: 'GET',
					dataType: 'json',
					url: 'http://localhost:8080' + url + id,
					async: false,
					contentType: "application/json",
					success: function(d) {
						if (d.code == '200') {
							data = d.data;
							// console.log(data);
						} else {
							console.log("不允许访问")
						}
					}
				})
				return data
			}
			// 修改弹出框的title, 显示弹框,修改操作
			function ShowCreateModal(title) {
				if (level < limtleveledit) {
					alert("没有权限!!");
					return false;
				}
				$("#createFileTitle").text(title);
				$('#createFileMModal').modal('show');
			}
			// 关闭弹框， 获取输入值，然后执行逻辑
			$("#createFileSureBut").click(function() {
				$("#createFileMModal").modal("hide");
				var inputFileName = $("#fileName").val();
				var deliver = getdata('/back/user/detail/', 1).operator;
				var operator = getdata('/back/texts/detail/', $("#createFileTitle").text()).deliver;
				var paprem = {
					'operator': operator,
					'deliver': deliver, //发送人姓名
					'main': inputFileName,
					'pubdate': Date.now(),
					'identify': '否'
				};
				var edit_paprem = {
					'id': $("#createFileTitle").text(),
					'identify': '是'
				};
				console.log(paprem)
				console.log("input file name : " + inputFileName);
				$.ajax({
					type: 'PUT',
					dataType: 'json',
					url: 'http://localhost:8080/back/texts/edit',
					contentType: "application/json",
					data: JSON.stringify(edit_paprem),
					success: function(d) {
						console.log(d)
						if (d.code == '200') {
							console.log('修改成功')
						} else {
							alert("修改失败！")
						}
					}
				})
				$.ajax({
					type: 'POST',
					dataType: 'json',
					url: 'http://localhost:8080/back/texts/push',
					contentType: "application/json",
					data: JSON.stringify(paprem),
					success: function(d) {
						console.log(d)
						if (d.code == '200') {
							alert("添加成功！");
							window.location.href = 'etextxx.html?id=' + userid;
						} else {
							alert("添加失败！")
						}
					}
				})

			});
			$('#search').click(function() {
				$('#arrange_table').bootstrapTable('refresh');
			});
			$("#createFileSure").click(function() {
				$("#createFileMModal").modal("hide");
			});

			function getUrlParams(key) {
				var url = window.location.search.substr(1);
				if (url == '') {
					return false;
				}
				var paramsArr = url.split('&');
				for (var i = 0; i < paramsArr.length; i++) {
					var combina = paramsArr[i].split("=");
					if (combina[0] == key) {
						return combina[1];
					}
				}
				return false;
			}

			function timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			}

			function actionFormatter(value, row, index) {
				var id = value;
				var result = "";
				// result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
				result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"ShowCreateModal('" + id +
					"')\" title='回复'><span class='glyphicon glyphicon-pencil'>回复</span></a>";
				result += "<a href='javascript:;' class='btn btn-xs red' id='" + id + "' onclick=\"DeleteById('" + id +
					"')\" title='删除'><span class='glyphicon glyphicon-remove'>删除</span></a>";
				return result;
			}

			function DeleteById(id) {
				if (level < limtleveldele) {
					alert("没有权限!!");
					return false;
				}
				if (window.confirm("您确定要删除消息吗?")) {
					$('#' + id).parent().parent().remove()
					$.ajax({
						type: 'DELETE',
						dataType: 'json',
						url: 'http://localhost:8080/back/texts/delete/' + id,
						contentType: "application/json",
						success: function(d) {
							console.log(d)
							if (d.code == '200') {
								alert("删除成功！")
							} else {
								alert("添加失败！")
							}
						},
						error: function(d) {
							console.log(d)
							alert("删除失败")
						}
					})
				}
			}
			// actionFormatter
			var columns = [{
				checkbox: false,
				visible: false //是否显示复选框  
			}, {
				field: 'id',
				title: 'ID',
			}, {
				field: 'operator',
				title: '所属用户',
			}, {
				field: 'deliver',
				title: '发送人用户名',
			}, {
				field: 'main',
				title: '系统短信内容',
			}, {
				field: 'pubdate',
				title: '创建时间'
			}, {
				field: 'identify',
				title: '消息是否已回复'
			}, {
				field: 'id',
				title: '操作',
				width: 120,
				align: 'center',
				valign: 'middle',
				formatter: actionFormatter
			}]
			$('#arrange_table').bootstrapTable({
				method: 'get', // 请求方式
				contentType: 'application/json; charset=UTF-8',
				url: 'http://localhost:8080/back/texts/list', //请求地址 
				dataField: 'data', //返回数据参数
				pagination: true, //是否开启分页
				pageNumber: 1, // 分页当前
				pageSize: 2, //每页的记录行数（*）
				pageList: [2, 4, 6], //可选分页
				paginationPreText: '上一页',
				paginationNextText: '下一页',
				sidePagination: "client", //服务端分页
				columns: columns,
				cache: false,
				responseHandler: function(data) {
					// 对返回参数进行处理
					var length = $(data.data).length
					for (var i = 0; i < length; i++) {
						data.data[i]["pubdate"] = timestampToTime(Number(data.data[i]["pubdate"]));
					}
					console.log(data);
					return data;
				},
				queryParams: function(param) {
					var operator = $.trim($('#operator').val())
					var deliver = $.trim($('#deliver').val())
					var main = $.trim($('#main').val())
					var identify = $.trim($('#identify').val())
					var temp = {};
					if (operator != null && operator != '' && operator != undefined) {
						temp["operator"] = operator;
					}
					if (deliver != null && deliver != '' && deliver != undefined) {
						temp["deliver"] = deliver;
					}
					if (main != null && main != '' && main != undefined) {
						temp["main"] = main;
					}
					if (identify != null && identify != '' && identify != undefined) {
						temp["identify"] = identify;
					}
					console.log(temp)
					return temp
				}
			})
		</script>

	</body>

</html>
